<script setup>
import { ref, defineProps } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	eventsVisible: Boolean
})
const emits = defineEmits(['changeEventsVisible'])
const activEvent = ref(1)
const eventFrom = ref({
	content: '',
	score: 1,
	name: ''
})
const isShow = ref(false)
const isNew = ref(false)
</script>
<template>
	<el-dialog v-model="props.eventsVisible" width="500px" @close="emits('changeEventsVisible', false)">
		<template #header>
			<h2 class="dialog-title">添加事件</h2>
		</template>
		<div class="score-box">
			<el-tabs style="margin-top: -20px" v-model="activEvent" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="自定义事件" :name="1"
					><div class="pane-box">
						<el-input
							v-model="eventFrom.content"
							placeholder="请输入要添加的备注信息吧，添加成功后将出现在客户动态列表里~"
							type="textarea"
							:autosize="{
								minRows: 9
							}"
							resize="none"
						/></div
				></el-tab-pane>
				<el-tab-pane label="模板事件" :name="2"
					><div class="pane-box" style="padding: 0">
						<div v-show="isNew">
							<div class="score-add" style="padding: 0; margin-bottom: 24px">
								<div class="title">选择事件：</div>
								<el-input
									style="width: 63%; height: 36px"
									v-model="eventFrom.name"
									placeholder="请输入事件名称"
									clearable
								/>
								<div class="btns">
									<span v-show="eventFrom.name != ''" class="select">确定</span>
									<span v-show="eventFrom.name == ''" class="no-select">确定</span>
									<span @click="isNew = !isNew" class="select">取消</span>
								</div>
							</div>
							<div class="score-add" style="padding: 0">
								<div class="title">备注：</div>
								<el-input
									style="width: 80%"
									v-model="eventFrom.content"
									placeholder="请输入要添加的备注信息吧，添加成功后将出现在客户动态列表里~"
									type="textarea"
									:autosize="{
										minRows: 9
									}"
									resize="none"
								/>
							</div>
						</div>
						<div v-show="!isNew">
							<div class="score-add" style="margin-bottom: 24px; padding: 0">
								<div class="title">选择事件：</div>
								<p class="add" @click="isNew = !isNew">
									<el-icon class="icon-warp parimary"><Plus /></el-icon> <span style="color: #1890ff">新建</span>
								</p>
							</div>
							<div class="empty">
								<img
									class="empty-template"
									src="../../../../assets/img/img/customer-events-dialog_empty-template.aa8981c4ee04.svg"
								/>
								<p style="margin-top: 15px">企业还没有设置模版事件哦～</p>
								<p>去新建企业模版吧</p>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div @click="isShow = !isShow" v-show="!isShow" class="score-input">
			<el-icon class="icon-warp"><CirclePlus /></el-icon>添加评分
		</div>
		<div @click="isShow = !isShow" v-show="isShow" class="score-input">
			<el-icon class="icon-warp"><Remove /></el-icon>取消添加评分
		</div>
		<div v-show="isShow" class="score-add">
			<span>给该客户添加</span>
			<el-input style="width: 116px" v-model="eventFrom.score" placeholder="分数">
				<template #append>分</template>
			</el-input>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button class="mergr-btn" @click="emits('changeEventsVisible', false)">取消</el-button>
				<el-button class="mergr-btn" type="primary" @click="emits('changeEventsVisible', false)"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-textarea__inner) {
	background-color: #fafafa;
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: -30px;
	.empty-template {
		width: 194px;
	}
	p {
		width: 100%;
		padding-left: 80px;
		text-align: center;
		font-size: 12px;
		color: #00000073;
	}
}
.add {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.parimary {
	color: #1890ff;
}
.icon-warp {
	font-size: 15px;
	margin-right: 3px;
}
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.score-add {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 8px;
	padding-left: 24px;
	.title {
		width: 20%;
		text-align: right;
	}
	span {
		margin-right: 5px;
		color: #000000a6;
	}
	.btns {
		width: 17%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.select {
			cursor: pointer;
		}
		.no-select {
			color: rgba(0, 0, 0, 0.25);
		}
	}
}
.pane-box {
	width: 100%;
	padding-left: 24px;
}
.score-input {
	width: 140px;
	display: flex;
	align-items: center;
	margin-top: 10px;
	padding-left: 24px;
	font-size: 14px;
	color: #1890ff;
	cursor: pointer;
}
.mergr-btn {
	width: 74px;
	height: 32px;
	border-radius: 2px;
}
.score-box {
	width: 100%;
}

.dialog-title {
	width: 100%;
	color: #262626;
	font-size: 17px;
	text-align: center;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 1px;
}
</style>
